import Header from "../components/Header/Header.tsx";
import {Card, message} from "antd";
import SuspenionButton from "../components/SuspensionButton/SuspensionButton.tsx";
import TopScrolling from "../components/TopScrolling/TopScrolling.tsx";
import MainCard from "../components/MainCard/MainCard.tsx";
import Loading from "../components/Loading/Loading.tsx";
import Footer from "../components/Footer/Footer.tsx";
import AddRoomSuspenion from "../components/AddRoomSuspenion/AddRoomSuspenion.tsx";
import {useEffect, useState} from "react";
import {listPageRoomUsingGet} from "../api/roomController.ts";

export default function Home() {
  const [roomList,setRoomList] = useState([]);


    useEffect(() => {
        const fetchRoomList = async () => {
            try {
                const res = await listPageRoomUsingGet();
                setRoomList(res.data.records);
            } catch (e) {
                message.error(e.message); // 显示错误信息
            }
        };

        fetchRoomList();
    }, []); // 空数组，确保只在组件加载时调用一次

  return (
    <div>
      <Header></Header>
      <div>
        <div style={{ maxWidth: 1400 }} className={"m-auto mb-2"}>
          <TopScrolling></TopScrolling>
        </div>
        <div style={{ maxWidth: 1400 }} className="m-auto">
          <div className="rounded grid gap-4 sm:gap-2 grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {
                  roomList.map((item, index) => {
                      return (
                          <Card key={item.id || index} className="shadow">
                              <MainCard
                                  roomInfo={item}
                              />
                          </Card>
                      );
                  })
              }
          </div>
          <div className={"mt-10 mb-4"}>
            <Loading></Loading>
          </div>
        </div>
      </div>

      <Footer></Footer>
      {/*  悬浮添加按钮*/}
      <AddRoomSuspenion></AddRoomSuspenion>
      {/*    悬浮按钮组件*/}
      <SuspenionButton></SuspenionButton>
    </div>
  );
}
